<template>
  <div class="absolute con" v-show="show">
    <div class="ai-face-con"></div>
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    }
  }
};
</script>

<style lang="scss" scoped>
.con {
  width: 100%;
  height: 100vh;
  z-index: 13;
  .ai-face-con {
    width: 100%;
    height: inherit;
    z-index: 999;
    position: absolute;
    background: linear-gradient(#ffc4c6, #ffc4c6),
      linear-gradient(90deg, #ffffff33 1px, transparent 0, transparent 7px),
      linear-gradient(#ffffff33 1px, transparent 0, transparent 7px),
      linear-gradient(transparent, #ffc4c6);

    background-size: 100% 1.5%, 10% 100%, 100% 10%, 100% 100%;

    background-repeat: no-repeat, repeat, repeat, repeat;

    background-position: 0 0, 0 0, 0 0, 0 0;

    clip-path: polygon(0% 0%, 100% 0%, 100% 1.5%, 0% 1.5%);

    animation: move 3.5s linear infinite;
  }

  @keyframes move {
    to {
      overflow: hidden;
      background-position: 0 100%, 0 0, 0 0, 0 0;

      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
  }
  .point {
    background-color: rgba($color:#cfcfcf, $alpha: .8);
    border-radius: 50%;
    position: absolute;
    @keyframes d {
      0%{
        opacity: .5;
        transform: scale(.7);
      }
      70%{
        background-color: rgba($color: #fff, $alpha: .4);
        transform: scale(1);
        opacity: .7;
      }
      100%{
        transform: scale(1.3);
        opacity: 1;
      }
    }
    &:nth-child(1) {
      animation: d 1s linear 1s infinite alternate;
      width: 10px;
      height: 10px;
      left: 30px;
      top: 80px;
    }
    &:nth-child(2) {
      animation: d 1s linear 1.6s infinite alternate;
      width: 10px;
      height: 10px;
      left: 107px;
      top: 80px;
    }

    &:nth-child(3) {
      animation: d 1s linear .3s infinite alternate;
      width: 10px;
      height: 10px;
      left: 73px;
      top: 137px;
    }

    &:nth-child(4) {
      animation: d 1s linear .3s infinite alternate;
      width: 10px;
      height: 10px;
      right: 120px;
    top: 180px;
    }

    &:nth-child(5) {
      animation: d 1s linear .4s infinite alternate;
      width: 10px;
      height: 10px;
          right: 68px;
    top: 280px;
    }

    &:nth-child(6) {
      animation: d 1s linear .5s infinite alternate;
      width: 10px;
      height: 10px;
          top: 200px;
    left: 150px;
    }

    &:nth-child(7) {
      animation: d 1s linear .6s infinite alternate;
      width: 10px;
      height: 10px;
          left: 210px;
    top: 310px;
    }

    &:nth-child(8) {
      animation: d 1s linear .7s infinite alternate;
      width: 10px;
      height: 10px;
      left: 140px;
    top: 120px;
    }

    &:nth-child(9) {
      animation: d 1s linear .8s infinite alternate;
      width: 10px;
      height: 10px;
      left: 120px;
    top: 260px;
    }

    &:nth-child(10) {
      animation: d 1s linear .9s infinite alternate;
      width: 10px;
      height: 10px;
      right: 40px;
      top: 140px;
    }
  }
}
</style>